import React from 'react';
import { connect } from 'dva';
import router from 'umi/router';
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { Card, Spin, Steps, Button, Row, Col } from 'antd';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import Result from '@/components/Result';
import downloadFile from '@/utils/utils';
import styles from '@/utils/utils.less';

const { Step } = Steps;
@connect(({ chargebillns, loading }) => ({
  chargebillns,
  loading: loading.models.chargebillns,
}))
@Form.create()
class SelectSteps extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      splitType: '1',
      uploadInfo: {
        batNo: '',
        billId: '',
        billNo: '',
        sumNumber: 0,
        successNumber: 0,
        errorNumber: 0,
        errorInfo: '未知错误',
        amountInvolved: 0,
      },
    };
  }

  componentDidMount() {
    const billUploadData = JSON.parse(window.localStorage.getItem('billUploadData'));
    if (billUploadData) {
      this.setState({
        uploadInfo: billUploadData,
        splitType: billUploadData.splitType,
      });
    }
  }

  // 下载错误数据
  downloadError = () => {
    const { uploadInfo } = this.state;
    const { batNo } = uploadInfo;
    downloadFile(batNo, '/csApi/nsBill/downBillEmpErr', 'POST');
  };

  render() {
    const { uploadInfo, splitType } = this.state;
    const { loading } = this.props;
    const information = (
      <div className={styles.information} style={{ lineHeight: '32px' }}>
        <Row>
          <Col span={4} className={styles.label}>
            任务名称：
          </Col>
          <Col span={4}>{splitType === '1' ? '按员工拆分' : '按产品拆分'}</Col>
        </Row>
        {splitType === '1' ? (
          <Row>
            <Col span={4} className={styles.label}>
              拆出员工数:
            </Col>
            <Col span={4}>{uploadInfo.successNumber}人</Col>
          </Row>
        ) : null}
        <Row>
          <Col span={4} className={styles.label}>
            涉及金额：
          </Col>
          <Col span={4}>{uploadInfo.amountInvolved}元</Col>
        </Row>
        {uploadInfo.errorNumber === 0 ? (
          <Row>
            <Col span={4} className={styles.label}>
              拆出账单编号：
            </Col>
            <Col span={4}>{uploadInfo.billNo}</Col>
          </Row>
        ) : (
          <div>
            <Row>
              <Col span={4} className={styles.label}>
                错误数据：
              </Col>
              <Col span={4}>{uploadInfo.errorNumber}条</Col>
              <Col span={4}>
                <Button onClick={this.downloadError} size="small">
                  下载
                </Button>
              </Col>
            </Row>
            <Row>
              <Col span={4} className={styles.label}>
                错误信息
              </Col>
              <Col span={4}>{uploadInfo.errorInfo}</Col>
            </Row>
          </div>
        )}
      </div>
    );
    return (
      <PageHeaderWrapper>
        <Spin tip="Loading..." spinning={loading}>
          <Card>
            <Steps current={2}>
              <Step title="下载模板" />
              <Step title={splitType === '1' ? '按员工拆分' : '按产品拆分'} />
              <Step title="完成" />
            </Steps>
            <Result type="success" title="操作成功" extra={information} className={styles.result} />
            <div style={{ marginTop: '50px', marginBottom: '30px', textAlign: 'center' }}>
              <Button
                style={{ marginRight: '30px' }}
                onClick={() =>
                  router.push(`/chargmanage/chargebillns/split?billId=${uploadInfo.billId}`)
                }
              >
                继续操作
              </Button>
              <Button type="primary" onClick={() => router.push('/chargmanage/chargebillns/index')}>
                完成
              </Button>
            </div>
          </Card>
        </Spin>
      </PageHeaderWrapper>
    );
  }
}
export default SelectSteps;
